<script setup>
import {InfoFilled} from "@element-plus/icons-vue";
import {ref, onBeforeUpdate, inject} from "vue";
import {elErrorMessageTip} from "@/utils/MessageTipUtils.js";
import {updateAuthorityAPI} from "@/api/manager.js";

const env = import.meta.env
const AUTHORITY_NAME_MAX_LEN = env.VITE_AUTHORITY_NAME_MAX_LEN
const AUTHORITY_CODE_MAX_LEN = env.VITE_AUTHORITY_CODE_MAX_LEN
const AUTHORITY_DESC_MAX_LEN = env.VITE_AUTHORITY_DESC_MAX_LEN

// 父组件注入的数据
const {updateAuthorityVisible, updateAuthorityData, searchByCondition} = inject('updateAuthority')

// 输入数据
const id = ref(null)
const name = ref(null)
const code = ref(null)
const disabled = ref(null)
const desc = ref(null)
onBeforeUpdate(() => {
  id.value = updateAuthorityData.value.id
  name.value = updateAuthorityData.value.name
  code.value = updateAuthorityData.value.code
  disabled.value = updateAuthorityData.value.disabled
  desc.value = updateAuthorityData.value.description
})

// 确认添加新权限
const confirmUpdate = async () => {
  // 未输入
  if (name.value.length <= 0 || code.value.length <= 0 || desc.value.length <= 0) {
    elErrorMessageTip("请先完成信息的输入")
    return
  }
  const res = await updateAuthorityAPI(id.value, name.value, code.value, disabled.value, desc.value)
  // 成功
  if (res) {
    // 重新查询权限列表
    await searchByCondition()
    updateAuthorityVisible.value = false
  }
}
// 取消添加新权限
const cancelUpdate = () => {}
</script>

<template>
  <div class="add-authority">
    <el-dialog v-model="updateAuthorityVisible" title="权限修改">
      <el-form label-position="right" label-width="110px">
        <el-form-item label="权限 ID">{{ id }}</el-form-item>
        <el-form-item label="权限名称">
          <el-input
              v-model="name"
              placeholder="请输入权限名称"
              clearable
              :maxlength="AUTHORITY_NAME_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="权限编码">
          <el-input
              v-model="code"
              placeholder="请输入权限编码"
              clearable
              :maxlength="AUTHORITY_CODE_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
        <el-form-item label="权限是否禁用">
          <el-radio-group v-model="disabled" class="ml-4">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">开放</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input
              autosize
              type="textarea"
              placeholder="请输入权限描述"
              clearable
              v-model="desc"
              :maxlength="AUTHORITY_DESC_MAX_LEN"
              show-word-limit
          />
        </el-form-item>
      </el-form>
      <div class="flex justify-end items-center">
        <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="是否确认提交权限修改？"
            @confirm="confirmUpdate"
            @cancel="cancelUpdate"
        >
          <template #reference>
            <el-button type="primary" plain>提交权限修改</el-button>
          </template>
        </el-popconfirm>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>